import React, { Component } from "react";
import styles from "./ElMall.module.scss";
import {withRouter} from 'react-router-dom'
import store from "../../../redux/store";
import {connect} from 'react-redux'
import {getMallInfoAction} from '../../../redux/actionCreators/search_action/index'
class ElMall extends Component {
  handleGoToEveryMall=(index)=>{
    this.props.history.push('./everymall')
    //调每店铺信息的接口
   console.log(index);


     store.dispatch(getMallInfoAction(index))
  }
  render() {
console.log(this.props.inputData);
    return (
      <div className={styles.elMallBox}>
        {this.props.inputData&&this.props.inputData.map((v, index) => {
          return (
            <div className={styles.elMallItem} key={v.id} onClick={this.handleGoToEveryMall.bind(this,v.id)}>
              <div className={styles.elMallItemLeft}>
                <img src={'https://elm.cangdu.org/img/'+v.image_path} alt="" />
              </div>
              <div className={styles.elMallItemRight}>
                <div className={styles.elMallItemRightTop}>
                  <div className={styles.malltitle}>{v.name}</div>
                  <div className={styles.payico}></div>
                </div>
              
                <div className={styles.elMallItemRightMid}>
                  月销量 {v.recent_order_num}单
                </div>
                <div className={styles.elMallItemRightBottom}>{v.float_minimum_order_amount}元起送 /   距离{v.distance}</div>
              </div>
            </div>
          );
        })} 
      </div>
    );
  }
}

export default  connect((state)=>{

 return {
  inputData:state.searchReducer.inputData,
  MallInfo:state.searchReducer.MallInfo,

 }
},()=>{
  return {}
})(withRouter(ElMall)) 
